*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--van-gray-1);
  color-scheme: light;
}

html.dark {
  background: #222;
  color-scheme: dark;
}

#app {
  // height: 100vh;
  // Dynamic Viewport Units
  // height: 100dvh;
  position: relative;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

// .slide-fadein-left-enter-active,
// .slide-fadein-right-enter-active,
// .slide-fadein-left-leave-active,
// .slide-fadein-right-leave-active {
//   transition:
//     opacity 0.3s,
//     transform 0.4s;
// }

// .slide-fadein-left-enter-from,
// .slide-fadein-right-leave-to {
//   transform: translateX(20px);
//   opacity: 0;
// }

// .slide-fadein-left-leave-to,
// .slide-fadein-right-enter-from {
//   transform: translateX(-20px);
//   opacity: 0;
// }

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s linear;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-item-enter-active,
.fade-item-leave-active {
  transition: opacity 0.2s linear;
}

.fade-item-enter-from,
.fade-item-leave-to {
  opacity: 0;
}

.van-button {
  display: block;
}
